var path = require('path');
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
//因为我们是vue.js的应用，把各个组件当做一个页面.vue后缀，所以引入这个可以编译這些文件
var vue = require("vue-loader");

//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, './src/main.js');
var BUILD_PATH = path.resolve(ROOT_PATH, 'dist');

var plugins = [
     // new CleanPlugin('dist'),
      new ExtractTextPlugin("css/style.css",{ 
          allChunks:true
      }),
      new webpack.ProvidePlugin({
          $: "webpack-zepto"
      }),
      //把入口文件里面的数组打包成verdors.js
      new webpack.optimize.CommonsChunkPlugin('js/common.js'),
      new HtmlWebpackPlugin({  // 首页 
        filename: 'index.html',
        template: path.resolve(ROOT_PATH, './src/index.html')
      })
];
module.exports = {
    // 入口文件，path.resolve()方法，可以结合我们给定的两个参数最后生成绝对路径，最终指向的就是我们的index.js文件
    entry: 
    {   
      entry: APP_PATH
    },
    // 输出配置
    output: {
        // 输出路径是 myProject/output/static
        path: BUILD_PATH,
        //publicPath : __dirname + '/build/',
        publicPath: 'http://127.0.0.1:8080/',
        filename: 'js/build.js',
        // 非主文件的命名规则
        chunkFilename: 'js/build[id].js'
    },
    resolve: {
        extensions: ['', '.js', '.vue']
    },
    module: {
      loaders: [
            {
                test: /\.vue$/, 
                loader: 'vue' 
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel'
            },
            //.css 文件使用 style-loader 和 css-loader 来处理
            {test:/\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
            //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            {
              test: /\.(jpg|jpe?g|png|gif|svg)$/,
              loader: 'url',
              query: {
                limit: 10000,
                name: 'imgs/[name].[ext]'
              },
              exclude: /node_modules/,
              include: path.resolve(__dirname, './src/imgs/')
            },
            //html模板编译？
            { test: /\.(html|tpl)$/, loader: 'html-loader' }
            ]
        
    },
    vue: {
      loaders:{
        css: ExtractTextPlugin.extract("css"),
        html:'html-loader'
      }
      
    },
    // 转化成es5的语法
    babel: {
      presets: ['es2015'],
      plugins: ['transform-runtime', ["component", [
      { "libraryName": "mint-ui", "style": true }]]
      ]
    },
    plugins: plugins,
    devtool: 'inline-source-map'
}